<template>
  <ContentWrap>
    <div class="btnWrap routeHeader">
      <div>
        <el-button @click="close">关闭</el-button>
      </div>
    </div>
  </ContentWrap>
  <ContentWrap>
    <el-table v-loading="loading" :data="list" border :height="tableHeight">
      <el-table-column type="index" width="55" label="序号" align="left" fixed="left"/>
      <!-- 列定义 -->
      <el-table-column
        label="订单号"
        :header-cell-class-name="star"
        align="left"
        width="180"
        prop="orderNumber"
      >
        <template #default="scope">
          <span>{{ scope.row.orderNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单类型" align="left" width="180">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.MARKET_ORDER_TYPE" :value="scope.row.dictOrderType" />
        </template>
      </el-table-column>
      <el-table-column label="业务类型" align="left" width="180">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.BUSINESS_TYPE" :value="scope.row.dictBusinessType" />
        </template>
      </el-table-column>
      <el-table-column label="销售类型" align="left" width="180">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.SALE_TYPE" :value="scope.row.dictSaleType" />
        </template>
      </el-table-column>
      <el-table-column label="客户简称" align="left" width="180">
        <template #default="scope">
          <el-select
            v-model="scope.row.customerName"
            placeholder="请选择客户简称"
            class="!w-140px"
            disabled
          >
            <el-option
              v-for="channel in tenantOptions"
              :key="channel.value"
              :value="channel.value"
              :label="channel.label"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="客户代码" align="left" width="180">
        <template #default="scope">
          <span>{{ scope.row.customerCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="销售部门" align="left" width="180">
        <template #default="scope">
          <el-select
            v-model="scope.row.salesDepartment"
            placeholder="请选择销售部门"
            class="!w-140px"
            disabled
          >
            <el-option
              v-for="channel in tenantOptions"
              :key="channel.value"
              :value="channel.value"
              :label="channel.label"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="合同日期" align="left" width="180">
        <template #default="scope">
          <span>{{ scope.row.contractDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单日期" align="left" width="180">
        <template #default="scope">
          <span>{{ scope.row.orderDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="业务员" align="left" width="180">
        <template #default="scope">
          <span>{{ scope.row.salesperson }}</span>
        </template>
      </el-table-column>
      <el-table-column label="税率" align="left" width="180">
        <template #default="scope">
          <span>{{ scope.row.taxRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="汇率" align="left" width="180">
        <template #default="scope">
          <span>{{ scope.row.exchangeRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="付款条件" align="left" width="180">
        <template #default="scope">
          <span>{{ scope.row.paymentConditions }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商务合同" align="left" width="180">
        <template #default="scope">
          <span style="cursor: pointer" @click="previewFile(scope.row.filePath)">{{
            scope.row.fileName
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="left" width="180">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.MARKET_ORDER_STATUS" :value="scope.row.dictOrderStatus" />
        </template>
      </el-table-column>
      <el-table-column label="备注" align="left" width="180">
        <template #default="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="left" width="180">
        <template #default="scope">
          {{ scope.row.creatorName }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="left" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ timestampToDateTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="变更人" align="left" width="180">
        <template #default="scope">
          {{ scope.row.orderChangePerson }}
        </template>
      </el-table-column>
      <el-table-column label="变更时间" align="left" width="180">
        <template #default="scope">
          {{ scope.row.orderChangeDate }}
        </template>
      </el-table-column> -->
    </el-table>
  </ContentWrap>
</template>

<script lang="ts" setup>
  import { useRoute } from 'vue-router'
  import { DICT_TYPE } from '@/utils/dict'
  import * as MarketingOrderInfoApi from '@/api/orderManagement/marketingOrderInfo'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  const route = useRoute()
  const { push } = useRouter()
  const tagsViewStore = useTagsViewStore()
  const routes = useRouter() // 路由
  const loading = ref(true)
  const formLoading = ref(false)
  const list = ref<any>([])
  const tenantOptions = ref([
    {
      label: 'u8待补',
      value: 0
    },
    {
      label: 'u8待补',
      value: 1
    }
  ])
  const getList = async () => {
    loading.value = true
    try {
      // 请求数据的逻辑
    } finally {
      loading.value = false
    }
  }
  const star = ({ columnIndex }) => {
    if (columnIndex != 4 && columnIndex != 5) {
      return 'star'
    }
  }
  //时间戳转换
  const timestampToDateTime = (timestamp) => {
    if (timestamp) {
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = ('0' + (date.getMonth() + 1)).slice(-2)
      const day = ('0' + date.getDate()).slice(-2)
      const hours = ('0' + date.getHours()).slice(-2)
      const minutes = ('0' + date.getMinutes()).slice(-2)
      const seconds = ('0' + date.getSeconds()).slice(-2)
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    } else {
      return ''
    }
  }
  /**关闭 */
  const close = async () => {
    console.log(routes.currentRoute.value)
    tagsViewStore.delView(routes.currentRoute.value)
    push('/orderManagement/orderManagement/marketing/info')
  }
  //获取订单信息
  const getDetail = async (id) => {
    const data = await MarketingOrderInfoApi.getMarketingOrderInfo(id)
    list.value.push(data)
  }
  //附件预览
  const previewFile = (url) => {
    console.log(url)
    window.open(url)
  }
  const contentHeight = ref(0)
  const refreshData = async () => {
    formLoading.value = true
    contentHeight.value = document.body.clientHeight - 127
    formLoading.value = false
  }
  // 初始化
  const tableHeight = ref(0)
  onMounted(async () => {
    refreshData()
    tableHeight.value = document.body.clientHeight - 132 - 100
    if (route.query.id != 'undefined') {
      getDetail(route.query.id)
    }
    await getList()
  })
</script>
<style lang="scss" scoped>
  .btnWrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .el-table__header-wrapper {
    background: red;
  }
  :deep(.el-form .el-input, .el-form .el-input__wrapper, .el-form .el-textarea) {
    width: 100% !important;
  }
</style>
